<template>
	<div class="path-list">
		<Header>
			<span v-if='pathStatus'>添加地址</span>
			<span v-else>编辑地址</span>
		</Header>
		<section>
			<!-- 添加地址 -->
			<div v-if="pathStatus" class="container">
				<div class="form-container">
					<form class="form" action="" ref="form" :model="form">
						<ul>
							<li>
								<span class="form-label">姓名</span>
								<div class="form-input">
									<input type="text" v-model="form.name" placeholder="收货人姓名">
								</div>
							</li>
							<li>
								<span class="form-label">电话</span>
								<div class="form-input">
									<input type="text" v-model="form.phone" placeholder="收货人手机号">
								</div>
							</li>
							<li>
								<span class="form-label">地区</span>
								<div class="form-input">
									<input type="text" v-model="form.path" placeholder="输入省/市/区">
								</div>
							</li>
							<li>
								<span class="form-label">详细地址</span>
								<div class="form-input">
									<input type="text" v-model="form.detailpath" placeholder="街道门牌/楼层房间号等">
								</div>
							</li>
							<li>
								<span class="form-label">设为默认地址</span>
								<div class="form-input">
									<el-switch class="right" v-model="form.delivery"></el-switch>
								</div>
							</li>
						</ul>
					</form>
				</div>
				<button @click="goAdd(form)">保存</button>
			</div>
			<!-- 编辑地址 -->
			<div v-else class="container">
				<div class="form-container">
					<form class="form" action="" ref="newform" :model="newform">
						<ul>
							<li>
								<span class="form-label">姓名</span>
								<div class="form-input">
									<input type="text" v-model="newform.name" placeholder="收货人姓名">
								</div>
							</li>
							<li>
								<span class="form-label">电话</span>
								<div class="form-input">
									<input type="text" v-model="newform.phone" placeholder="收货人手机号">
								</div>
							</li>
							<li>
								<span class="form-label">地区</span>
								<div class="form-input">
									<input type="text" v-model="newform.path" placeholder="输入省/市/区">
								</div>
							</li>
							<li>
								<span class="form-label">详细地址</span>
								<div class="form-input">
									<input type="text" v-model="newform.detailpath" placeholder="街道门牌/楼层房间号等">
								</div>
							</li>
							<li>
								<span class="form-label">设为默认地址</span>
								<div class="form-input">
									<el-switch class="right" v-model="newform.delivery"></el-switch>
								</div>
							</li>
						</ul>
					</form>
				</div>
				<button @click="goUpdate(newform)">修改</button>
				<button class="btn1" @click="godelete(newform)">删除</button>
			</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import Header from '@/components/path/Header.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	import http from '@/common/api/request.js'
	import { Toast } from 'mint-ui'
	export default{
		data() {
		     return {
			   pathStatus:false,
		       form: {
		         name: '',
				 phone:'',
		         path: '',
		         detailpath: '',
		         delivery: false
		       },
			   newform: {
				 id:'',
			     name: '',
			   	 phone:'',
			     path: '',
			     detailpath: '',
			     delivery: false
			   }
		     }
		   },
		components:{
			Header,
			Tabbar
		},
		created(){
			let key = JSON.parse(this.$route.params.key);
			//是通过添加进来的
			if(key == "add"){
				this.pathStatus = true;
			}else{//通过编辑进来的
			console.log(key)
				this.newform = key;
				this.newform.delivery = this.newform.delivery == 1 ? true : false;
			}
		},
		methods:{
			//点击保存，触发新增
			goAdd(form){
				form.delivery = form.delivery==true ? 1 : 0;
				http.$axios({
					url:'/api/addAddress',
					method:'POST',
					headers:{
						token:true
					},
					data:{
						...form
					}
				}).then(res=>{
					if(!res.success) return;
					Toast(res.msg);
					this.$router.push('/path');
				})
			 },
			//点击修改，触发修改
			goUpdate(newform){
				this.newform.delivery = this.newform.delivery==true ? 1 : 0;
				http.$axios({
					url:'/api/updateAddress',
					method:'POST',
					headers:{
						token:true
					},
					data:{
						...this.newform
					}
				}).then(res=>{
					if(!res.success) return;
					Toast(res.msg);
					this.$router.push('/path');
				})
			},
			//删除
			godelete(newform){
				http.$axios({
					url:'/api/daleteAddress',
					method:'POST',
					headers:{
						token:true
					},
					data:{
						id:newform.id
					}
				}).then(res=>{
					if(!res.success) return;
					Toast(res.msg);
					this.$router.push('/path');
				})
			}
		}
	}
</script>

<style scoped>
	.path-list{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	section{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f7f7f7;
	}
	section .form-container{
		width: 100%;
		background-color: #fff;
	}
	section .form-container ul{
	}
	section .form-container ul li{
		border-bottom: 2px solid #f7f7f7;
	}
	section .form .form-label{
		text-align: right;
		vertical-align: middle;
		font-size: 14px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		box-sizing: border-box;
		width: 2.133333rem;
		margin: 0.266667rem 0;
		padding-left: 0.666667rem;
		/* color: #333;
		font-size: 0.426667rem;
		text-align: center; */
	}
	section .form .form-input{
		position: relative;
		margin-left: 0.533333rem;
		padding-left: 30px;
		font-size: 14px;
		display: inline-block;
	}
	section .form ul li input{
		background-color: #FFF;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: 0.32rem;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		width: 100%;
	}
	section button{
		margin-top: 0.8rem;
		margin-left: 20px;
		width: 90%;
		height: 1.066667rem;
		font-weight: 600;
		border-radius: 0.64rem;
		border: 0;
		color: #fff;
		background-color: #b0352f;
	}
	::v-deep .el-switch__core{
		box-sizing: border-box;
		display: inline-block;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		width: 100%;
		right: 0;
	}
	section .btn1{
		color: black;
		background-color: #fff;
	}
	::v-deep .tabbar{
		border-top: 2px solid #ccc;
	}
</style>